<template>
  <h3>类型设置</h3>
  <!-- 搜索栏 -->
  <el-row style="margin-top: 10px">
    <el-col :span="24">
      <el-form :model="fixQuery" inline>
        <el-form-item label="工装夹具编码">
          <el-input v-model="fixQuery.fixEncode" placeholder="请输入类型编码"/>
        </el-form-item>
        <el-form-item label="工装夹具名称">
          <el-input v-model="fixQuery.fixName" placeholder="请输入类型名称"/>
        </el-form-item>
        <el-form-item label="工装夹具类型">
          <el-select v-model="fixQuery.fixType" placeholder="请选择保养维护类型" style="width: 200px">
            <el-option label="全部" :value="0"/>
            <el-option label="定期维护" :value="1"/>
            <el-option label="按使用次数维护" :value="2"/>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="loadFixes">搜索</el-button>
          <el-button @click="reloadFixes">重置</el-button>
          <el-button type="info" @click="fixExport">导出</el-button>
        </el-form-item>
      </el-form>
    </el-col>
  </el-row>
  <!-- 工具栏 -->
  <el-row>
    <el-col :span="24">
      <el-button type="primary" @click="toAdd">新增</el-button>
      <el-button type="primary" @click="toEdits">修改</el-button>
      <el-button type="primary" @click="toDelete">删除</el-button>
    </el-col>
  </el-row>
  <!-- 数据表 -->
  <el-row style="margin-top: 10px">
    <el-col :span="24">
      <el-table
          :data="fixes"
          border
          stripe
      ><!-- stripe可以为表格添加斑马纹样式，默认false -->
        <el-table-column type="selection" width="55"/>
        <el-table-column prop="fixEncode" label="类型编码" width="150" align="center"/>
        <el-table-column prop="fixName" label="类型名称" width="150" align="center">
          <template #default="scope">
            <el-link @click="showDetail(scope.row.fixId)" type="primary">{{ scope.row.fixName }}</el-link>
          </template>
        </el-table-column>
        <el-table-column prop="fixStatus" label="状态" width="150" align="center">
          <template #default="scope">
            <el-tag  v-if="scope.row.fixStatus == 1">在库</el-tag>
            <el-tag  v-else-if="scope.row.fixStatus ==2">被领用</el-tag>
            <el-tag  v-else-if="scope.row.fixStatus == 3">报废</el-tag>
            <el-tag  v-else>维修中</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="fixType" label="项目类型" width="150" align="center">
          <template #default="scope">
            <el-tag v-if="scope.row.fixType === 1">定期维护</el-tag>
            <el-tag v-else>按使用次数维护</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="fixFrequency" label="保养周期" width="150" align="center"/>
        <el-table-column prop="fixRemark" label="备注" width="250" align="center"/>
        <el-table-column label="操作" align="center">
          <template #default="scope">
            <el-button-group>
              <el-button size="small" type="primary" @click="editFix(scope.row.fixId)">修改</el-button>
              <el-button size="small" type="danger" @click="deleteFix(scope.row)">删除</el-button>
            </el-button-group>
          </template>
        </el-table-column>
      </el-table>
    </el-col>
  </el-row>
  <!-- 新增工装夹具台账弹窗 -->
  <ledger-add :flag="addFix" @cancelAdd="cancelAdd" @addComplete="loadFixes"/>
  <!-- 编辑点检保养项目弹窗 -->
  <ledger-edit :fixId="editFixId" @cancelEdit="cancelEdit" @editComplete="loadFixes"/>
  <!-- 详情工装夹具台账弹窗 -->
  <ledger-detail :fixId="detailFixId" @cancelDetail="cancelDetail"/>
</template>

<script setup>

// 封装查询条件
import {onMounted, ref} from "vue";

import {ElMessage, ElMessageBox} from "element-plus";
import fixRequest from "@/api/fix.js";
import LedgerAdd from "@/views/tools/ledger-add.vue";
import LedgerDetail from "@/views/tools/ledger-detail.vue";
import LedgerEdit from "@/views/tools/ledger-edit.vue";

// 封装查询条件
let fixQuery = ref({});
// 封装查询的结果集合
let fixes = ref([]);
// 新增的addFix
let addFix = ref(-1);
// 编辑的editFixId
let editFixId = ref(-1);
// 详情的detailFixId
let detailFixId = ref(-1);

function cancelDetail(){
  detailFixId.value = -1;
}

function showDetail(fixId) {
  detailFixId.value = fixId;
}
function toAdd(){
  addFix.value = 1;
}
function cancelAdd(){
  addFix.value = -1;
}
function editFix(fixId){
  editFixId.value = fixId;
}
function cancelEdit() {
  editFixId.value = -1;
}
function loadFixes(){
  fixRequest.loadFixes(fixQuery.value,res=>{
    fixes.value = res.data;
  })
}

function reloadFixes(){
  fixQuery.value.fixEncode = null;
  fixQuery.value.fixName = null;
  fixQuery.value.fixType = 0;
  fixRequest.loadFixes(fixQuery.value,res=>{
    fixes.value = res.data;
  })
}
function deleteFix(fix){
  ElMessageBox.confirm(
      '您确定要将设备[' + fix.fixEncode + ']删除吗？',
      'Warning',
      {
        confirmButtonText: '是的',
        cancelButtonText: '点错了',
        type: 'warning',
      }
  ).then(() => {
    fixRequest.delete(fix.fixId, res => {
      ElMessage({
        type: "success",
        message: "操作完成"
      });
      loadFixes();
    })
  }).catch(() => {
  });
}

onMounted(()=>{
  loadFixes();
})
</script>

<style scoped>

</style>